<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>可编辑表格</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    table {
      margin-top: 10px;
      width: 1000px;
      min-height: 40px;
      border: 1px solid #ccc;
      border-collapse: collapse;
      text-align: center;
    }

    th,
    td {
      border: 1px solid #ccc;
    }
  </style>
</head>

<body>
  <label for="uname">姓名</label><input type="text" id="uname">
  <label for="age">年龄</label><input type="number" id="age">
  <label for="tel">电话</label><input type="number" id="tel">
  <label for="qq">QQ号</label><input type="number" id="qq">
  <button class="btn">保存</button>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
        <th>QQ号</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script src="./ultis.js"></script>
  <script>
    // 可编辑表格
    var data = []
    var arr = []
    var obj = {}
    var uname = document.querySelector("#uname")
    var age = document.querySelector("#age")
    var tel = document.querySelector("#tel")
    var qq = document.querySelector("#qq")
    var btn = document.querySelector(".btn")
    var tbody = document.querySelector("tbody")
    var table = document.querySelector("table")
    table.appendChild(tbody)

    btn.onclick = function () {
      var unameVal = uname.value;
      var ageVal = age.value;
      var telVal = tel.value;
      var qqVal = qq.value;
      obj.name = unameVal
      obj.age = ageVal
      obj.tel = telVal
      obj.qq = qqVal
      // console.log(obj); //{name: "andy", age: "11", tel: "22", qq: "33"}
      data.push(obj)
      // console.log(data);


      //动态创建表格
      for (var i = 0; i < data.length; i++) {
        var index = i;
        var tr = document.createElement("tr");
        for (var j = 0; j < 6; j++) {
          var td = document.querySelector("td");
          tr.innerHTML = `
          <td>${index+1}</td> <td><input type="text" value="${data[i].name}"> </td> <td><input type="text" value="${data[i].age}"> </td> 
          <td><input type="text" value="${data[i].tel}"> </td> <td><input type="text" value="${data[i].qq}"> </td> <td><a href="###" class="remove">删除</a></td>
          `
        }
      }
      tbody.appendChild(tr)
      //获取到删除按钮
      var as = document.querySelectorAll("td .remove")
      as.forEach(function (items, i) {
        as[i].onclick = function () {
          tbody.removeChild(this.parentNode.parentNode)
        }
      })

      //获取到td
      var tds = document.querySelectorAll("td")
      //对td添加双击事件
      var res;
      for (let i = 0; i < tds.length; i++) {
        let index = i
        tds[index].addEventListener("keyup", function (e) {
          // console.log(e.target.value);
          res = e.target.value //拿到修改后的表单的值 也就是鼠标抬起的时候拿到！
          index0 = index;
        })
      }
      document.addEventListener("click", function (e) {
        console.log(res)

      })
    }
  </script>
</body>

</html>